import React, {PureComponent} from "react"
import {Col, Row, Tag} from "antd"
import "./index.less"
import {HOST} from "../../../../shared/project-config"


const statusRender = {
  firstUnderReview: <Tag color={'blue'}>审核中</Tag>,
  updateUnderReview: <Tag color={'blue'}>审核中</Tag>,
  agree: <Tag color={'#87d068'}>通过</Tag>,
  reject: <Tag color={'red'}>拒绝</Tag>
}

const labelCol = 8;
const valueCol = 16;

export default class ShopItem extends PureComponent {

  render() {

    const {data, children} = this.props

    return (
      <div className={'shop-item'}>
        <div className={'si-header'}>
          {data.shopName}
          <div style={{marginLeft: '20px'}}>{statusRender[data.status]}</div>
        </div>
        <div className={'si-container'}>
          {
            (data['shopDetailList'] || []).map((d,index) =>
              <div key={`key$${index}`}>
                <Row gutter={16}>
                  <Col span={labelCol}>
                    <div className={'zr-label'}>店主</div>
                  </Col>
                  <Col span={valueCol}>{data['ownerName']}</Col>
                </Row>

                <Row gutter={16}>
                  <Col span={labelCol}>
                    <div className={'zr-label'}>店主身份证号</div>
                  </Col>
                  <Col span={valueCol}>{data['idCardNo']}</Col>
                </Row>

                <Row gutter={16}>
                  <Col span={labelCol}>
                    <div className={'zr-label'}>所在地区</div>
                  </Col>
                  <Col span={valueCol}>{`${d['province']} ${d['city']} ${d['county']}`}</Col>
                </Row>

                <Row gutter={16}>
                  <Col span={labelCol}>
                    <div className={'zr-label'}>详细地址</div>
                  </Col>
                  <Col span={valueCol}>{d['address']}</Col>
                </Row>

                <Row gutter={16}>
                  <Col span={labelCol}>
                    <div className={'zr-label'}>主页</div>
                  </Col>
                  <Col span={valueCol}>
                    <a href={`http://${data['homePage']}.ld006.com/`} style={{fontWeight: 'bold'}}>
                      http://{data['homePage']}.ld006.com/
                    </a>
                  </Col>
                </Row>

                <Row gutter={16}>
                  <Col span={labelCol}>
                    <div className={'zr-label'}>联系方式</div>
                  </Col>
                  <Col span={valueCol}>
                    {d['primaryPhone'] || '暂无'}
                  </Col>
                </Row>

                <Row gutter={16}>
                  <Col span={labelCol}>
                    <div className={'zr-label'}>营业执照</div>
                  </Col>
                  <Col span={valueCol}>
                    {
                      d['licensePictureId']
                        ? <img src={`${HOST}/file/image/${d['licensePictureId']}`}/>
                        : '暂无'
                    }
                  </Col>
                </Row>

                <Row gutter={16}>
                  <Col span={labelCol}>
                    <div className={'zr-label'}>身份证照</div>
                  </Col>
                  <Col span={valueCol}>
                    {
                      data['idCardPictureId']
                        ? <img src={`${HOST}/file/image/${data['idCardPictureId']}`}/>
                        : '暂无'
                    }
                  </Col>
                </Row>

                <Row gutter={16}>
                  <Col span={labelCol}>
                    <div className={'zr-label'}>联系方式一</div>
                  </Col>
                  <Col span={valueCol}>
                    {d['otherPhone1'] || '暂无'}
                  </Col>
                </Row>

                <Row gutter={16}>
                  <Col span={labelCol}>
                    <div className={'zr-label'}>联系方式二</div>
                  </Col>
                  <Col span={valueCol}>
                    {d['otherPhone2'] || '暂无'}
                  </Col>
                </Row>

                <Row gutter={16}>
                  <Col span={labelCol}>
                    <div className={'zr-label'}>联系方式三</div>
                  </Col>
                  <Col span={valueCol}>
                    {d['otherPhone3'] || '暂无'}
                  </Col>
                </Row>

                <Row gutter={16}>
                  <Col span={labelCol}>
                    <div className={'zr-label'}>门店描述</div>
                  </Col>
                  <Col span={valueCol}>
                    {d['description'] || '暂无'}
                  </Col>
                </Row>

                <Row>
                  <Col span={labelCol}>
                    <div className={'zr-label'}>创建时间</div>
                  </Col>
                  <Col span={valueCol}>{data['createTime']}</Col>
                </Row>
              </div>
            )
          }
        </div>
        {
          children
        }
      </div>
    )
  }
}